<template>
  <div class="app-container" >
    <el-card shadow="never" >
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.query.id">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      <el-divider v-show="breadcrumb" />
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-form ref="query" :model="query">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="标签名称" prop="tagName">
              <el-input v-model="query.tagName" style="width: 180px"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="state">
              <el-select v-model="query.state" placeholder="请选择">
                <el-option label="启用" value="1"> </el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          <div class="icon-back">
            <el-form-item style="text-align: right">
            <el-button type="text" @click="$router.push('/subjects/list')" v-show="$route.query.name"  icon="el-icon-back">返回学科</el-button>
            <el-button  type="text" style="visibility:hidden;" v-if="!$route.query.name" icon="el-icon-back">返回学科</el-button>
              <el-button type="success" @click="showDialog" size="small" icon="el-icon-edit">新增标签</el-button>
            </el-form-item>
            </div>
          </el-col>

        </el-row>
      </el-form>
      <!-- 数据记录 -->
      <el-alert v-if="alertText !== ''" :title="alertText" type="info" class="alert" :closable="false" show-icon>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template #default="{ row }">
            {{ fromatTime(row.addDate) }}
          </template>
        </el-table-column>

        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text"  @click="toggle(row)">
              {{ row.state === 1 ? '禁用' : '启用' }}
            </el-button>

            <el-button size="medium" type="text" :disabled="row.state === 1 ? true : false" @click="detail(row)">修改
            </el-button>

            <el-button size="medium" type="text" :disabled="row.state === 1 ? true : false" @click="remove(row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page"
          :page-sizes="[10, 20, 30, 50]" :page-size="query.pagesize" layout="  prev, pager, next,sizes, jumper"
          :total="total" hide-on-single-page>
        </el-pagination>
      </div>

      <!-- 新增标签层 -->
      <tagsAddVue ref="editTag" :show-dialog="dialogFormVisible" @close-dialog="closeDialog" @getList="getList">
      </tagsAddVue>

      <!-- 新增页面 -->
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove, detail } from '@/api/hmmm/tags.js'
import tagsAddVue from '../components/tags-add.vue'
import dayjs from 'dayjs'

export default {
  components: {
    tagsAddVue
  },
  data () {
    return {
      breadcrumb: '',
      // 表格
      tableData: [],
      // 分页
      query: {
        page: 1,
        pagesize: 10,
        tagName: null,
        state: null,

        subjectID: this.$route.query.id || null // 学科id
      },
      // 整条数
      total: 0,
      // 提示栏
      alertText: '',
      // 对话窗口默认隐藏
      dialogFormVisible: false
    }
  },

  mounted () {
    this.getList()
  },
  beforeRouteUpdate (to, from, next) {
    this.query.subjectID = null
    this.getlist()
    next()
  },
  methods: {
    // 获取数据
    async getList () {
      const { data: res } = await list(this.query)
      this.tableData = res.items
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
    },
    // 行数
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.getList()
    },
    // 页数
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getList()
    },
    // 清除
    resetForm () {
      this.$refs.query.resetFields()
      this.getList()
    },
    // 搜索
    search () {
      // if (this.query.tagName.trim() === '' && this.query.state === '') {
      //   return this.$message.warning('搜索内容不得为空！！')
      // }
      this.query.page = 1
      this.getList()
    },
    //  对话窗口显示隐藏
    showDialog () {
      this.dialogFormVisible = true
      this.$refs.editTag.title = '新增标签'
    },
    closeDialog () {
      this.dialogFormVisible = false
      this.$refs.editTag.form = {
        tagName: '',
        subjectID: ''
      }
    },
    // 格式化日期
    fromatTime (value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 清除按钮
    resetData () {
      this.tagsForm = {
        tagName: '',
        state: ''
      }
    },
    // 状态切换
    async toggle (row) {
      this.state = row.state === 1 ? 0 : 1
      // 赋值
      await changeState({
        state: this.state,
        id: row.id
      })
      // 渲染列表
      this.getList()
    },
    // 删除
    remove (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 调用删除接口
          await remove(row)
          // 更新列表
          this.getList()
          // 提示用户
          this.$message.success('删除成功')
        })
        .catch()
    },
    // 修改按钮
    // 获取角色详情
    async detail (row) {
      // 打开弹框
      this.showDialog()
      // 调用接口获取数据 完成回显
      const res = await detail(row)
      this.$refs.editTag.form = res.data
      this.$refs.editTag.title = '修改标签'
    }
  }
}
</script>

<style>
.block {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.icon-back {
  display: flex;
  margin-left: 50px;
}

</style>
